<script setup lang="ts">
import CdlSearch from "@/components/search";
import CdlTable from "@/components/table";
import CdlBill from "@/components/bill"
import CdlDescriptions from "@/components/descriptions";
import {Mode, Query, State, FormData} from "@/interfaces/components/Page";
import {useRouter} from "vue-router";
import {reactive, h, ref} from "vue";
import {useTablePagingTemplate} from "@/hooks/TableHooks";
import {Bills} from "@/interfaces/views/finance/bills";
import {FormTree} from "@/interfaces/components/Form";
import {TableTree} from "@/interfaces/components/Table";
import {createPopup} from "@/utils/createPopup";
import {DescriptionsTree} from "@/interfaces/components/Descriptions";
import {ElImage, ElMessageBox} from "element-plus";
import constant from "@/utils/constant";
import {ElMessage} from "element-plus/es";
import {useSettlementApprovalApi} from "@/api/finance/finance";

const router = useRouter()
const request = {
  createdIsNeed: true,
  url: "/bill/bill",
}
const state = reactive<State<Query<Bills>, Bills>>({
  queryForm: {},
  dataList: []
})
const {query, added, loading} = useTablePagingTemplate(request, state)
const searchTree: FormTree<Bills> = [
    [
      {label: "账单类型", component: "select"},
      {label: "是否已结清", component: "select"}
    ]
]

const tableTree: TableTree<Bills> = {
  colRule: [
    {ti: "账单ID", prop: "id", width: 180},
    {ti: "账单名称", prop: "billTypeName"},
    {ti: "状态", prop: "billStatus", dict: "bill_status"},
    {ti: "创建时间", prop: "createTime", width: 160},
    {ti: "关联订单", prop: "billName"},
    {ti: "关联车辆", prop: "carNo"},
    {ti: "关联运单", prop: "wayBillName"},
    {ti: "关联司机", prop: "driverName"},
    {ti: "收入/支出", prop: "modeId", dict: "bill_mode", width: 130},
    {ti: "金额", prop: "amount"},
    {ti: "账单说明", prop: "billRemark", width: 200, tooltip: true},
    {ti: "图片", prop: "imageArr", slot: (scope)=>{
        const images = scope?.map((item: string) => constant.downloadUrl + item) || []
        return h(ElImage, {
          src: images[0],
          style: "height: 30px",
          previewSrcList: images,
          previewTeleported: true,
        })
      }},
    {ti: "处理意见", prop: "handleMsg"},
    {ti: "处理时间", prop: "handleTime", width: 160},
    {ti: "备注", prop: "remark"},
  ],
  control: [
    {name: "详情", type: "info", method: openBillInfo},
    {name: "结清", type: "success", prop: "id", method: (id)=> openSettlementBill(id, true)},
    {name: "驳回", type: "danger", prop: "id", method: (id)=> openSettlementBill(id, false)}
  ]
}

const popupDetailTree: DescriptionsTree<Bills> = [
  {label: "账单名称", prop: "billTypeName", minWidth: 250},
  {label: "账单类型", prop: "billTypeId", dict: "bill_type"},
  {label: "收入/支出", prop: "modeId", dict: "bill_mode"},
  {label: "收款人名称", prop: "gatherName"},
  {label: "付款人名称", prop: "paypalName", minWidth: 250},
  {label: "关联车辆", prop: "carNo", minWidth: 250},
  {label: "金额", prop: "amount"},
  {label: "账单说明", prop: "billRemark"},
  {label: "图片", prop: "imageArr"},
  {label: "备注", prop: "remark"},
  {label: "创建人", prop: ""},
  {label: "创建时间", prop: "createTime"},
]
const popupData = ref<FormData<Bills>>({

})

/**
 * 新建账单
 */
function openBillInsert(){
  createPopup("新建账单", h(CdlBill, {
    types: [5, 6]
  }), "add", popupCallBack)
}

/**
 * 详情
 */
function openBillInfo(data: Bills){
  createPopup("结清账单", h(CdlDescriptions, {
    templateTree: popupDetailTree,
    model: data
  }))
}
function openSettlementBill(id: string, state: boolean){
  ElMessageBox.prompt('请填入处理意见', state? '结清': '驳回', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(({ value }) => {
        useSettlementApprovalApi({
          billId: id,
          handle: state,
          handleMsg: value
        }).then(()=>{
          ElMessage({
            type: 'success',
            message: `操作成功！`,
          })
          query()
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        })
      })
}

/**
 * 回调处理
 * @param mode
 * @param data
 */
function popupCallBack(mode: Mode, data: any){
  switch (mode){
    case "add":
      added(data)
      break
  }
}
</script>

<template>
  <el-card>
    <CdlSearch :model="state.queryForm" :template-tree="searchTree">
      <template #menu>
        <el-button type="primary" @click="openBillInsert">新增</el-button>
      </template>
    </CdlSearch>
    <CdlTable :template-tree="tableTree" :data="state.dataList" control-fixed :control-width="240" :loading="loading"></CdlTable>
  </el-card>
</template>
